import React, { useRef, useState, useEffect } from 'react';
import '../assets/Work/Work.scss'
import { useDispatch, useSelector } from 'react-redux'

import Nav from '../components/Work/Nav'
import Tabs from '../components/Work/Tab/Tabs'
import Tab from '../components/Work/Tab/Tab'
import Picture from '../components/Work/Center/Picture';
import { clickimg } from '../store/modules/create';
import 'cropperjs/dist/cropper.css';
import * as ICE from '../store/modules/create'

// 裁剪第三方
import Cropper from 'react-cropper'

import { SketchPicker } from 'react-color'
import { Button, Modal } from 'antd';

// import Center from '../components/Work/Center'
function Work() {

  // 鼠标点击左侧的分类
  const [type, setType] = useState('Dimg')

  const [isModalOpen,setIsModalOpen]=useState(false);

  const dispatch = useDispatch()
  const [backgroundColor, setBackgroundColor] = useState({ r: 255, g: 255, b: 255, a: 1.0 })
  // 获取当前选中组件 
  const currentcomponent = useSelector((state: any) => state.reducer.currentcomponent)
  const componentLists = useSelector((state: any) => state.reducer.currentXHLS)
  console.log(componentLists,'=========================sdf');
  

  // 仓库侧边栏数据 
  // 图片数据
  const componentsData = useSelector((state: any) => state.reducer.componentsData)
  // 输入框数据
  const componentsText = useSelector((state: any) => state.reducer.componentsText)
  // 按钮数据
  const componentsBtn = useSelector((state: any) => state.reducer.componentsBtn)
  // 中间画布数据
  const componentsList = useSelector((state: any) => state.reducer.currentXHL)

  const componentClick = useSelector((state: any) => state.reducer.admmData)
  console.log(componentClick, '11111111111111111111111111');

  const componentNewaddome = useSelector((state: any) => state.reducer.newaddome)
  console.log(componentNewaddome, '123456789');
  // 裁剪图片
  const cropperRef:any=useRef()
  const showModal=()=>{
    setIsModalOpen(true)
  }
  const handleOk=()=>{
    if(cropperRef.current){
      const cropper=cropperRef.current.cropper
      const canvasData=cropper.getCroppedCanvas()
      console.log(canvasData,'1================1');
      const image=canvasData.toDataURL('image/png')
      dispatch(ICE.updataImage({image:image,width:canvasData.width,height:canvasData.height}))
    }
    setIsModalOpen(false)
  }

const handleCancel=()=>{
  setIsModalOpen(false)
}


  const handleDragStart = (e: any) => {
    console.log(e, '========================sjdfj');
    e.dataTransfer.setData('index', e.target.dataset.index)
  }

  const handleDragOver = (e: any) => {
    e.preventDefault()
  }

  // 颜色
  const handleColor = (color: any) => {
    setBackgroundColor(color.rgb)
  }

  const handleDrop = (e: any) => {
    const { clientX, clientY } = e;
    const boxcanvas: any = document.getElementById('WordCen_center_canvas')
    const { left, top } = boxcanvas.getBoundingClientRect();

    let dropX = clientX - left
    let dropY = clientY - top
    const i = e.dataTransfer.getData('index');

    let data
    switch (type) {
      case 'Dtext':
        data = componentsText[i]
        break;
      case 'Dimg':
        data = componentsData[i]
        break;
      default:
        data = null;
    }

    const { width, height } = data.style
    dropX -= width / 2
    dropY -= height / 2
    let newData = JSON.parse(JSON.stringify(data))

    dispatch(ICE.addCanvas(newData))
    dispatch(ICE.setItemMoudle(newData))
    e.preventDefault()
  }

  return (
    <div className='Word'>
      <Nav></Nav>
      {/* <Center></Center> */}
      <div className='WordCen' >
        <div className="WordCen_left">
          <Tabs>
            <Tab label='模板'>
              {

                componentClick.map((item: any, index: any) => (
                  <div style={{ height: '200px' }}>
                    <img src={item.img} alt="" key={index} onClick={() => {
                      dispatch(ICE.clickimg(item))
                    }} />
                  </div>
                ))
              }
            </Tab>
            <Tab label='文字'>
              {

                componentsText.map((item: any, index: any) => (
                  <p key={index}>{item.propLable}</p>
                ))
                // componentsData.map((item:any,index:number)=>{
                //   <img onMouseDown={()=>setType(item.component)} draggable='true' data-index={index}  key={index} width={100} src={item.propLable} alt='' />
                // })
              }
            </Tab>
            <Tab label='素材'>

            </Tab>
            <Tab label='图片' >
              {

                componentsData.map((item: any, index: number) => (
                  <img onMouseDown={() => setType(item.component)} draggable='true' onDragStart={handleDragStart} data-index={index} key={index} width={100} src={item.propLable} alt='' />
                ))
              }
            </Tab>
            <Tab label='二维码'>

            </Tab>
            <Tab label='上传'>

            </Tab>

          </Tabs>
        </div>
        <div className='WordCen_center'>
          <div id='WordCen_center_canvas' style={{ backgroundImage: `url(${componentNewaddome.img})`, backgroundColor: `rgba(${backgroundColor.r},${backgroundColor.g},${backgroundColor.b},${backgroundColor.a})` }} onDragOver={handleDragOver} onDrop={handleDrop} >
            {
              componentsList.map((item: any, index: number) => (
                <Picture key={index} element={item.payload}></Picture>
              ))
            }
            {/* <img src="" alt="" /> */}
          </div>
        </div>
        <div className='WordCen_right'>

          <Tabs>
            <Tab label='页面设置' >
              <SketchPicker color={backgroundColor} onChange={handleColor}></SketchPicker>
            </Tab>
            <Tab label='图层管理'>

            </Tab>
            <Tab label='页面管理'>
                <Button onClick={showModal} type='primary' danger style={{marginLeft:'20px',marginTop:'20px'}}>截图</Button>
                <Modal title='Basic Modal' open={isModalOpen} onOk={handleOk} onCancel={handleCancel} style={{position:'relative'}}>
                  <Cropper
                  ref={cropperRef}
                  src={componentLists.propLable}
                  style={{height:400,width:"100%"}}
                  >

                  </Cropper>

                </Modal>
                <Button type='primary' danger style={{marginLeft:"20px",marginTop:'20px'}}>抠图</Button>
            </Tab>
          </Tabs>
        </div>

      </div>
    </div>
  )
}

export default Work
